<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">

		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

		<title>02CSS선택자</title>
	<style type="text/css">
	 *{font-style: italic; font-family: Mangal} /* 전체 선택자*/
		h2{color: blue;} /*타입선택자*/
		hr{width: 50%; } /*타입선택자*/
		.myclass{color: lightblue; font-style: normal; font-size: 24px;}
		#idhd,#idp{color: navy; font-size: 32px;} /* 아이디선택자*/
		input[type="text"]{border: 1px dashed lightgreen;}
		input[type="password"]{border: 1px dashed lightblue;}
		input[type="checkbox"]{border: 1px dashed lightgreen;} /*속성선택자*/
		
		/*링크 가상클래스 선택자(순서대로 할것 - link,visted,hover,active 순으로)*/
		a:link {color: navy; text-decoration: none}  /* */
		a:visited {color: brown; text-decoration: none} /* */
		a:hover { color: orange; text-decoration: underline} /* 마우스 가져다 댔을때 */
		a:active{color: blue; text-decoration: none} /*눌렀을때 */
		
		/*가상 클래스 선택자*/
		input:focus{background: purple}
		input:checked{text-decoration: red}
		input:enabled{text-decoration: orange}
		input:disable{text-decoration: pink}
		
	</style>
	</head>

	<body>
		<h1>02CSS선택자</h1>
		<h2>전체universal선택자 *</h2>
		<p>모든요소에 동일한 스타일 적ㅇ용</p>
		
		<hr />
		<h2>타입 type선택자</h2>
		<p>특정 요소에 대한 스타일 적용 </p>
		
		<hr />
		
		<h2 class="myclass">클래스 class설정자</h2>
		<p class="myclass">요소 class속성을 통해 스타일 적용</p>
		<p>동일한 스타일을 하나이상의 요소에 적용</p>
		
		<hr />
		<h2 id="idhd">아이디 id 선택자</h2>
		<p id="idp">요소 id속성명을 통해 스타일작성</p>
		<p>id 속성명은 중복될수 없으므로 특정 스타일을 특정 요소에만 적용</p>


		<hr />
		<h2>속성 attribute 선택자</h2>
		<div><input type="text" ></div>
		<div><input type="password" /></div>
		<div><input type="radio" /></div>
		<div><input type="checkbox" /></div>
		
		<hr />
		<h2>가상클래스 선택자</h2>
		<div><input type="text" disabled="disabled" ></div>
		<div><input type="password" /></div>
		<div><a href="http://www.google.co.kr">구글로 이동</a></div>
		<div><input type="checkbox" checked="checked" /></div>
			
		
	</body>
</html>
